<template>
  <div class="login-container" style="background-image: url('http://localhost:8992/user/photo/mian.png'); background-size: cover; background-position: center;">
    <div class="login-card">
      <div class="avatar-container">
        <img src="http://localhost:8992/user/photo/tou.png" alt="Avatar" class="avatar">
      </div>
      <h2 class="title">数字人模拟面试系统</h2>
      <p class="subtitle">登录您的账号开始面试训练</p>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="0">
        <el-form-item prop="username">
          <el-input v-model="form.u" placeholder="请输入您的电话或邮箱" :prefix-icon="User" size="large"  :style="{ '--el-input-icon-size': iconSize + 'px' }"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" size="large" placeholder="请输入您的密码" type="password" :prefix-icon="Lock" :suffix-icon="Hide"></el-input>
          <el-link type="primary" class="forgot-password" @click="showForgotPassword">忘记密码？</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
        </el-form-item>
        <div class="other-login">其他登录方式</div>
        <div class="login-icons">
          <el-icon class="icon"><ChatDotRound /></el-icon>
          <el-icon class="icon"><Bell /></el-icon>
          <el-icon class="icon"><Message /></el-icon>
        </div>
        <el-link type="primary" class="register-link" @click="showRegister" :underline="false">还没有账号？立即注册</el-link>
      </el-form>
      <div class="copyright">© 2025 数字人模拟面试系统 版权所有</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ChatDotRound, Bell, Message,User,Hide,Lock} from '@element-plus/icons-vue';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router=useRouter();
// 表单引用
const formRef = ref(null);
// 表单数据
const form = ref({
  u:"",
  password:"",
});
// 表单验证规则
// const rules = ref({
//   u: [
//     { required: true, message: '请输入电话或邮箱', trigger: 'blur' }
//   ],
//   password: [
//     { required: true, message: '请输入密码', trigger: 'blur' }
//   ]
// });
// 忘记密码弹窗显示状态
const showForgotPassword=()=>{
  router.push("/ForgotPasswordForm")

}
// 注册弹窗显示状态
const showRegister = ()=>{
  router.push("/registration")
}


localStorage.clear()
// 登录处理函数
const handleLogin = async () => {


  axios({
    url:"/api/user/user/login",
    method:"get",
    params:form.value
  }).then((rew)=>{
    if(rew.data!=null){
      console.log(rew.data);
      ElMessage.success("登陆成功")
      localStorage.setItem("user",rew.data)
      localStorage.setItem("uid",rew.data.id)
      localStorage.setItem("touxiang",rew.data.avatarUrl)
      localStorage.setItem("haoma",rew.data.phone)
      localStorage.setItem("youjian",rew.data.email)
      router.push("/geren")

    }else {
      ElMessage.error("登录失败")
    }
  })
};
const iconSize = ref(500);
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.login-card {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 40px 60px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.title {
  text-align: center;
  margin-bottom: 10px;
}
.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}
.forgot-password {
  float: right;
  margin-bottom: 10px;
}
.remember-me {
  margin-bottom: 20px;
}
.login-button {
  width: 100%;
}
.other-login {
  text-align: center;
  margin: 20px 0;
  color: #666;
}
.login-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.icon {
  font-size: 24px;
  color: #409eff;
  cursor: pointer;
}
.register-link {
  display: block;
  text-align: center;
}
.copyright {
  text-align: center;
  margin-top: 20px;
  color: #999;
  font-size: 12px;
}

</style>